<template>
	<!--零钱体现 -->
	<view class="content display  displayColumn width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">零钱提现</text>
			</template>
		</u-navbar>
		<view class="fn_content display  width-100 displayColumn fontSize font_comm">
			<view class="fn_all display  M-T30">
				<view class="fn_all_one display  displayColumn all_item" v-for="(item,index) in arr" :key="index" @click="changeindex(index)">
					 <span class="weixin" :style="{color:selectIndex==index ? '#126BC9' : '' ,fontWeight:selectIndex==index ?'600' :'400',fontSize:selectIndex==index ?'28rpx':'24rpx'}">{{item}}</span>
					 <view class="lines_all display all_item" v-if="selectIndex==index"></view>
				</view>
				
				
			</view>
			<!-- 支付宝 -->
			<view class="zhifubao display  displayColumn width_699 M-L30 displaycenter_jus M-T30" v-if="selectIndex==1">
				<input type="text" placeholder-class="zhifubao_plc" class="zhifubao_input" placeholder="请输入支付宝账号" />
				<input type="text" placeholder-class="zhifubao_plc" class="zhifubao_input M-T24" placeholder="请输入姓名" />
				<span class="fn_zhifubao" style="margin-top: 12rpx;">请输入与账号一致的姓名，否则将会导致提现失败</span>
			</view>
			<!-- 微信 -->
			<view class="fn_weixins display  displayColumn width-699 fontSize font_comm displaycenter_jus M-T26 M-L30" >
				<view class="fn_weixins_one display  displaycenter_aliem" v-if="selectIndex==0||selectIndex==1">
					<span class="wode1 M-L24">今日剩余提现机会10</span>
				</view>
				<view class="fn_weixins_two display  displaycenter_aliem M-T26">
					<span class="fn_txt2 M-L24">￥</span>
					<input type="text" placeholder-class="wode_input" class="input" placeholder="请输入提现金额" v-model="cashMoney"/>
				</view>
				<!-- 线 -->
				<view class="fn_line M-L24 M-T20"></view>
				<view class="fn_weixins_three display  displaycenter_aliem M-T24">
					<span class="fn_txt3 M-L24">零钱余额￥{{cash}}</span>
				</view>
			</view>
			<!-- 按钮体现 -->
			<view class="fn_wode_btns display  all_item fontSize font_comm width-100 M-T100" v-if="selectIndex==0||selectIndex==1" @click="withcash">
				<button class="fn_cc_btns display all_item">72小时到账，确认提现</button>
			</view>
			<view class="fn_wode_btns display  all_item fontSize font_comm width-100 M-T100" v-if="selectIndex==2">
				<button class="fn_cc_btns display all_item" @click="lingqiancash">确认转入零钱</button>
			</view>
			<!-- 体现说明 -->
			<view class="cashout display displayColumn width-100 fontSize font_comm " v-if="selectIndex==0||selectIndex==1">
				<span class="fn_txt4 display M-L30 M-T36" >提现说明</span>
				<view class="fn_cashout display width-699 displayColumn M-T20 M-L30">
					<span class="fn_txt5 M-L24">1.每次最多可提现500元</span>
					<span class="fn_txt5 M-L24 M-T24">2.每天最多可提现10次</span>
					<span class="fn_txt5 M-L24 M-T24">3.每次手续费为提现金额25%</span>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:0,
				arr:['微信','支付宝','转到零钱'],
				cash:0,//余额
				// arr:['微信','转到零钱']
				userInfo:{},//用户信息
				cashMoney:''
			}
		},
		onLoad(options) {
			this.cash = options.cash;
	this.userInfo = uni.getStorageSync('userInfo').user;
		},
		methods: {
			changeindex(index){
				if(index==1){
					this.$modal.msg('暂未开通支付宝')
					return false;
				}
				this.selectIndex=index;
			},
			withcash(){
				this.$modal.loading('体现中，请稍等')
				// 体现
				let data = {
					  withdrawAmount:this.cashMoney,
					  userId:this.userInfo.userId
				}
				console.log(data)
				this.$req.post('/withdraw/towx',data).then(res=>{
					console.log(res);
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.cash = Number(this.cash) - Number(this.cashMoney);
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
				
			},
			// 零钱体现
			lingqiancash(){
				this.$modal.loading('体现中')
				let data = {
					withdrawAmount:this.cashMoney,
				}
				console.log(data)
				this.$req.post('/xcx/userExtendWallet/transferToWallet',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code!=200){
						this.$modal.msg(res.data.msg);
						this.cash = Number(this.cash) - Number(this.cashMoney)
					}else{
						
					}
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
.fn_all{
	justify-content: space-between;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.weixin{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.weixin1{
	font-weight: 600;
	font-size: 28rpx;
	color: #126BC9;
}
.lines_all{
	width: 36rpx;
	height: 6rpx;
	background: #126BC9;
	border-radius: 3rpx 3rpx 3rpx 3rpx;
	margin-top: 5rpx;
}
.fn_weixins{
	width: 690rpx;
	// height: 256rpx;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.wode_input{
	font-weight: 400;
	font-size: 40rpx;
	color: #72778A;
	text-align: left;
}
.input{
	text-align: left;
}
.fn_line{
	width: 642rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #F6F6F6;
}
.wode1{
	font-weight: 400;
	font-size: 28rpx;
	color: #126BC9;
}
.fn_txt2{
	font-weight: 600;
	font-size: 52rpx;
	color: #000000;
}
.fn_txt3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_cc_btns{
	width: 690rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}

.fn_txt5{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_cashout{
	width: 690rpx;
	height: 198rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	align-items: flex-start;
	justify-content: center;
}
.cashout{
	align-items: flex-start;
}
.zhifubao{
	width: 690rpx;
	height: 246rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	input{
		text-align: left;
		width: 618rpx;
		height: 64rpx;
		background: #F6F6F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		
		margin-left: 24rpx;
	}
}
.zhifubao_plc{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
	
}
.fn_zhifubao{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
	text-align: left;
	margin-left: 24rpx;
}
.zhifubao_input{
	padding-left: 24rpx;
	
}
</style>
